<template>
  <div class="box">
    <div class="video">
      <div
        class="item"
        :style="{
          width: width,
          height: height,
        }"
        v-for="v in numBox"
        :key="v"
      ></div>
    </div>
    <div class="btn">
      <button @click="changeBox(1)">1</button>
      <button @click="changeBox(4)">4</button>
      <button @click="changeBox(9)">9</button>
      <button @click="changeBox(16)">16</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const width = ref("100%");
const height = ref("100%");
const numBox = ref(1);
const changeBox = (num) => {
  switch (num) {
    case 1:
      width.value = "100%";
      height.value = "100%";
      numBox.value = 1;
      break;
    case 4:
      width.value = "50%";
      height.value = "300px";
      numBox.value = 4;
      break;
    case 9:
      width.value = "33.3%";
      height.value = "200px";
      numBox.value = 9;
      break;
    case 16:
      width.value = "25%";
      height.value = "150px";
      numBox.value = 16;
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.video {
  height: 600px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item {
  background-color: #ccc;
  border: 1px black solid;
  box-sizing: border-box;
}
</style>
